import React from 'react'
import { CSSTransition } from "react-transition-group"
import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button, SearchWrapper, SearchInfo, SearchInfoTitle, SearchInfoSwitch, SearchInfoItem, SearchInfoList } from './style'
import { connect } from 'react-redux'
import { searchBlur, searchFocus, getList, mouseEnter, mouseLeave, changePage } from './store'
import { Link } from 'react-router-dom'
import { logout } from '../../pages/login/store'
class Header extends React.Component {
    // 搜索框下拉列表的实现
    getListArea() {
        const { focused, list, page, mouseIn, totalPage, handleMouseEnter, handleMouseLeave, handleChangePage, } = this.props
        const newList = list
        const pageList = []
        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }
        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchInfoTitle>
                        热门搜索
                    <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
                            <span ref={(icon) => { this.spinIcon = icon }} className="iconfont spin">&#xe851;</span>
                            换一批
                    </SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                </SearchInfo>
            )
        } else {
            return null;
        }
    }
    render() {
        const { login, logout } = this.props
        return (
            <HeaderWrapper>
                <Link to="/"> <Logo></Logo></Link>
                <Nav>
                    <NavItem className="left active"><span className="iconfont">&#xe609;</span>首页</NavItem>
                    <NavItem className="left"> <span className="iconfont">&#xe6c6;</span>下载APP</NavItem>
                    {
                        login ? <NavItem onClick={logout} className="right" style={{ cursor: 'pointer' }}>退出</NavItem> :
                            <Link to="/login">
                                <NavItem className="right">登录</NavItem></Link>
                    }
                    <NavItem className="right"><span className="iconfont">&#xe636;</span></NavItem>
                    <SearchWrapper>
                        <CSSTransition
                            in={this.props.focused}
                            timeout={300}
                            classNames="slide"
                        >
                            <NavSearch className={this.props.focused ? 'focused' : ''}
                                onFocus={() => this.props.handleInputFocus(this.props.list)}
                                onBlur={this.props.handleInputBlur}
                            ></NavSearch>
                        </CSSTransition>
                        <span className={this.props.focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe637;</span>
                        {this.getListArea()}
                    </SearchWrapper>
                    <Addition>
                        <Link to={'/write'}>  <Button className="writting">
                            <span className="iconfont">&#xe6e5;</span>写文章</Button></Link>
                        <Button className="reg" >注册</Button>
                    </Addition>
                </Nav>
            </HeaderWrapper>
        )
    }
}

function mapStateToProps(state, props) {
    return {
        // focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        mouseIn: state.getIn(['header', 'mouseIn']),
        totalPage: state.getIn(['header', 'totalPage']),
        login: state.getIn(['login', 'login'])

    }
}
const mapDispatchToProps = (dispatch, props) => {
    return {
        handleInputFocus(list) {
            // console.log(list);
            (list.size === 0) && dispatch(getList())
            const action = searchFocus()
            dispatch(action)

        },
        handleInputBlur() {
            dispatch(searchBlur())
        },
        handleMouseEnter() {
            dispatch(mouseEnter())
        },
        handleMouseLeave() {
            dispatch(mouseLeave())
        },
        handleChangePage(page, totalPage, spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
            if (originAngle) {
                originAngle = parseInt(originAngle, 10)

            } else {
                originAngle = 0;
            }

            // console.log(originAngle);
            spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)'

            // console.log(spin.style.transform)
            if (page < totalPage) {
                dispatch(changePage(page + 1))

            } else {
                dispatch(changePage(1))
            }
            // console.log(page, totalPage);
        },
        logout() {
            dispatch(logout())
        }
    }

}
export default connect(mapStateToProps, mapDispatchToProps)(Header)
